<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>观众登录</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>
<style type="text/css">
    body{
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction:row;
        justify-content: center;
        align-items: center;
    }
</style>
</head>
<body>
<form class="container" style="width: 400px" method="post" th:action="@{/testEmail}" onsubmit="return test(this)" >
    <h1>观众登录</h1>
    <div class="input-group mb-3">
        <span class="input-group-text">邮箱</span>
        <input type="email" class="form-control" id="audEmail" name="audEmail" aria-describedby="basic-addon3">
        <p th:text="${msg}"></p>
    </div>
    <br>
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="输入邮箱验证码验证邮箱" id="emailTest" name="emailTest" aria-describedby="button-addon2">
        <button class="btn btn-outline-secondary" type="button" id="button-addon2">发送验证码</button>
    </div>
    <div>
        <button class="btn btn-outline-info" style="width: 375px" type="submit">提交</button>
    </div>
    <br>
    <div>
        <a class="btn btn-outline-info" style="width: 375px" th:href="@{/Admin}">管理员登录</a>
    </div>
</form>
<script type="text/javascript">
    $('#button-addon2').on("click",function (){
        $.ajax({
            url:"/sendEmail",//要请求的服务器url
            data:{
                'audEmail':$("#audEmail").val()
            },//一个对象，表示请求参数，有两个参数 method val  method表示交给Servlet中的什么方法处理，不写默认为doGet或者doPost
            async:true,//是否是异步请求
            cache:false,//是否缓存结果
            type:"GET",//请求方式
            dataType:"json",//服务器返回什么类型数据 text xml javascript json(javascript对象)
            success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
               alert("邮件发送成功！请在5分中之内输入验证码登录");
            },
            error:function (){
                alert("邮件发送失败，请检查邮箱是否正确!")
            }
        })
    })

    function test(){
        if ($("#audEmail").val() == ""){
            alert("邮箱不能为空！");
            return false;
        }
        if ($("#emailTest").val() == ""){
            alert("请输入邮箱验证码！");
            return false;
        }
    }

</script>
</body>
</html>